<template>
  <view>
    <checkbox-group @change="checkboxChange" v-if="type==='checkbox'">
      <view class="itemContainer">
        <label v-for="option in dictOptions" :key="option[idKey]">
          <checkbox style="transform: scale(0.7)" :value="option[idKey]" :checked="option.checked">{{option[realNameKey]}}</checkbox>
        </label>
      </view>
    </checkbox-group>

    <radio-group @change="radioChange" v-if="type==='radio'">
      <view class="itemContainer">
        <label v-for="option in dictOptions" :key="option[idKey]">
          <radio style="transform: scale(0.7)" :value="option[idKey]" :checked="option.checked">{{option[realNameKey]}}</radio>
        </label>
      </view>
    </radio-group>

    <text style="margin-left: 20rpx" v-if="type==='text'">{{getDictLabel(this.value)}}</text>

    <uni-data-select :value="value" :localdata="dictOptions" @change="selectChange" v-if="type==='select'"/>
  </view>
</template>

<script>
import {getDictByType} from "../../api/modules/sys";
import UniTag from "../../uni_modules/uni-tag/components/uni-tag/uni-tag.vue";
import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";

export default {
  name: "dictSelect",
  components: {UniDataSelect, UniTag},
  props: {
    value: {
      type: [Number,Array],
      default: null,
    },
    options: {
      type: Array,
      default: [],
    },
    api: {
      type: Function,
      default: null,
    },
    params: {
      type : Object,
      default: null,
    },
    dictType: {
      type: String,
      default: null,
    },
    type: {
      type: String,
      default: "radio",
    },
    idKey: {
      type: String,
      default: 'dictValue',
    },
    nameKey: {
      type: String,
      default: 'dictLabel',
    }
  },
  data() {
    return {
      dictOptions: this.options,
    }
  },
  watch: {
    value(val){
      console.log("value change value type:",typeof val,",value:",val);
      this.inputValue = val;
      if(!this.isSelectType){
        this.initOptionsByValue(this.dictOptions);
      }
    },
    options(val){
      if(this.isSelectType){
        val = this.handleOptionsBySelect(val);
      }
      this.dictOptions = val;
    }
  },
  computed: {
    realIdKey(){
      return this.isSelectType ? 'value' : this.idKey;
    },

    realNameKey(){
      return this.isSelectType ? 'text' : this.nameKey;
    },

    isSelectType(){
      return this.type === 'select';
    }
  },
  methods: {
    getDictLabel(value,defaultLabel=''){
      if(this.isEmpty(value) || this.isEmpty(this.dictOptions)){
        return defaultLabel;
      }
      for(let option of this.dictOptions){
        // noinspection EqualityComparisonWithCoercionJS
        if(option[this.realIdKey] == value){
          return option[this.realNameKey];
        }
      }
      return defaultLabel;
    },
    selectChange(value){
      console.log("selectChange",typeof value,value);
      this.$emit("input",value);
      this.$emit("update:value",value);
    },
    radioChange(e){
      let value = e.detail.value;
      for(let option of this.dictOptions){
        if(option[this.realIdKey] === value){
          this.$set(option,'checked',true);
        }
      }
      console.log("radioChange",typeof value,value);
      this.$emit("input",value);
      this.$emit("update:value",value);
    },
    checkboxChange(e) {
      let options = this.dictOptions;
      let values = e.detail.value;
      for (let i = 0, lenI = options.length; i < lenI; ++i) {
        const option = options[i];
        if(values.includes(option[this.realIdKey])){
          this.$set(option,'checked',true);
        }else{
          this.$set(option,'checked',false);
        }
      }
      console.log("checkboxChange",typeof values,values);
      this.$emit("input",values);
      this.$emit("update:value",values);
    },

    handleOptionsBySelect(dictOptions){
      if(this.isEmpty(dictOptions)){
        return dictOptions;
      }
      return dictOptions.map(item => {
        return {"text": item[this.nameKey], "value": item[this.idKey]};
      });
    },

    initOptionsByValue(options,setModify=true){
      if(this.isEmpty(options) || this.isEmpty(this.value)){
        return;
      }

      let values = null;
      if(typeof this.value === 'number'){
        values = new Set();
        values.add(this.value);
      }else {
        values = new Set(this.value);
      }

      console.log("initOptionsByValue",values,options.map(item=>item[this.idKey]));
      for (let option of options){
        let val = option[this.idKey];
        let strVal = val.toString();
        let numVal = typeof val === 'number' ? val : parseInt(val);
        if(values.has(strVal) || values.has(numVal)){
          console.log("initOptionsByValue checkedValue:",val)
          this.$set(option,'checked',true);
        }
      }
    },
    dictOptionsChangeByCreate(dictOptions){
      if(!dictOptions){
        return;
      }
      let notifyOptions = dictOptions;
      if(this.isSelectType){
        dictOptions = this.handleOptionsBySelect(dictOptions);
      }else {
        this.initOptionsByValue(dictOptions,false);
      }
      this.dictOptions = dictOptions;
      this.$emit("update:options",notifyOptions);
      console.log("dictOptionsChangeByCreate() type:"+this.type+",dictOptions:",dictOptions);
    }
  },
  created() {
    if(this.dictType){
      getDictByType(this.dictType).then(res=>{
        let dictOptions;
        if(this.isEmpty(this.dictOptions)){
          dictOptions = res.data;
        }else {
          dictOptions = [...this.dictOptions,...res.data]
        }
        this.dictOptionsChangeByCreate(dictOptions);
      });
    }else if(this.api){
      let callback = res=>{
        let dictOptions;
        if(res.data){
          dictOptions = res.data.list ? res.data.list : res.data;
        }else if(res.rows){
          dictOptions = res.rows;
        }else if(res.result){
          dictOptions = res.result;
        }
        this.dictOptionsChangeByCreate(dictOptions);
      };
      if(this.params){
        this.api(this.params).then(callback);
      }else{
        this.api().then(callback);
      }
    }else if(this.dictOptions.length > 0){
      if(this.isSelectType){
        this.dictOptions = this.handleOptionsBySelect(this.dictOptions);
      }
    }else {
      console.log("dict-select没有被指定数据");
    }
  },

}
</script>

<style>
.itemContainer {
  gap: 10rpx;
  display: flex;
  /* justify-content: space-between; */
  align-content: center;
  flex-wrap: wrap;
  font-size: 36rpx;
  color: #808080;
  width: 100%;
  margin-bottom: 20rpx;

  /* margin-left:50upx; */
}
</style>